<template>
  <a-spin :spinning="loading">
    <a-modal  v-model="visible" title="新增菜单" @cancel="handleClose" @ok="submitForm">
      <a-form-model ref="ruleForm" :model="ruleForm" :rules="rules" v-bind="layout">
        <a-form-model-item has-feedback label="菜单名称" prop="name">
          <a-input v-model="ruleForm.name"  autocomplete="off" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="上级菜单" prop="higher">
          <a-select v-model="ruleForm.higher" placeholder="请选择上级菜单">
            <a-select-option value="0" v-bind:key="0">
              无上级菜单
            </a-select-option>
            <a-select-option v-for="item in selectData" :value="item.id" v-bind:key="item.id">
              {{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-model-item>
        <a-form-model-item has-feedback label="图标" prop="icon">
          <a-input v-model="ruleForm.icon" />
        </a-form-model-item>
        <a-form-model-item has-feedback label="菜单路径" prop="path">
          <a-input v-model="ruleForm.path"  />
        </a-form-model-item>
      </a-form-model>
    </a-modal>
  </a-spin>
</template>
<script>
export default {
  props: {
    modelVisible: {
			type: Boolean,
			default: false,
		},
    submit: {
      type:Function,
      default:()=>{}
    },
    handleClose: {
      type:Function,
      default:()=>{}
    },
    selectData: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
      rules: {
        name: [
          { required: true, message: '请输入菜单名称', trigger: 'blur' },
        ],
        higher: [
          { required: true, message: '请选择上级菜单', trigger: 'blur' },
        ],
        path: [
          { required: true, message: '请输入菜单路径', trigger: 'blur' },
        ],
      },
      layout: {
        labelCol: { span: 4 },
        wrapperCol: { span: 14 },
      },
      loading:false,
      ruleForm: {
        name: '',
        higher: '',
        path: '',
        icon:'',
      },
    };
  },
  computed:{
    visible: {
      get(){
        return this.modelVisible
      },
      set(value){
        return value
      }
    }
  },
  methods: {
    submitForm(){
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.loading=true
          this.submit(this.ruleForm)
          this.loading=false
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
  },
};
</script>
